import dayjs from "dayjs";
import { reactive, type Ref } from "vue";
import { loginLogApi } from "@/api/system/loginlog";
import { usePublicHooks } from "@/utils/viewsPublic";
import { hasAuth } from "@/router/utils";

export function useLoginLog(tableRef: Ref) {
  const { tagStyle } = usePublicHooks();
  const api = reactive({
    list: loginLogApi.list,
    fields: loginLogApi.fields
  });

  const auth = reactive({
    list: true,
    add: hasAuth("add"),
    update: hasAuth("update"),
    import: hasAuth("import"),
    export: hasAuth("export"),
    download: hasAuth("download")
  });

  const columns: TableColumnList = [
    {
      label: "编号",
      prop: "id",
      width: 70
    },
    {
      label: "账号",
      prop: "username",
      width: 90
    },
    {
      label: "登录时间",
      width: 200,
      prop: "create_time",
      formatter: ({ create_time }) =>
        create_time ? dayjs(create_time).format("YYYY-MM-DD HH:mm:ss") : ""
    },
    {
      label: "类型",
      prop: "type",
      width: 80,
      cellRenderer: ({ row, props }) => (
        <el-tag size={props.size} style={tagStyle.value(row.type > 0 ? 0 : 1)}>
          {row.type === 0 ? "成功" : "错误"}
        </el-tag>
      )
    },
    {
      label: "类型提示",
      prop: "type_str",
      width: 180
    },
    {
      label: "IP",
      prop: "ip",
      width: 120
    },
    {
      label: "归属地",
      prop: "address",
      width: 230
    },
    {
      label: "操作系统",
      prop: "os",
      width: 120
    },
    {
      label: "浏览器",
      prop: "browser",
      width: 160
    },
    {
      label: "user-agent",
      prop: "user_agent",
      minWidth: 220
    }
  ];

  return { api, auth, columns };
}
